<template>
	<i-popup v-if="showWithdrawal" :confirmData="{title: '立即认证'}" @close="showWithdrawal = false" @confirm="confirm">
		<view class="withdrawal_body">
			<text class="text">提现前准备</text>
			<text>使用提现功能前，请先确认手机号与实名认证</text>
		</view>
	</i-popup>
	<view class="my_income">
		<view class="income_title">
			<view class="title_price">
				<view class="day_price" style="margin-right: 138rpx;">
					<text class="price">{{headerInfo.todayBrokerageAmount}}</text>
					<text>今日收益（元）</text>
				</view>
				<view class="day_price">
					<text class="price">{{headerInfo.monthBrokerageAmount}}</text>
					<text>本月收益（元）</text>
				</view>
			</view>
			<view class="title_bot">
				<view class="all_price">
					<text>我的余额（元）</text>
					<text class="price">{{headerInfo.brokerageAmount}}</text>
				</view>
				<i-buttons radius="4" color="#16161F" border="#EFD6BF" @click="goWithdrawal">立即提现</i-buttons>
			</view>
		</view>
		<view class="income_list">
			<i-moveSwiper v-model="currentPage" :show_line="true" :scrollList="swiper_list" size="28" margin="0"
				linHeight="4rpx" :swiperHeight="height">
				<template #flmx>
					<i-scrollList @more="more" :height="height+ 'px'" :total="ListData.flmx.total"
						:pageTotal="ListData.flmx.list.length">
						<view class="income_item" v-for="(item,index) in ListData.flmx.list" :key="index">
							<view class="item_title">
								<text class="title_name">{{item.title}}</text>
								<text class="title_status">{{item.statusDesc}}</text>
							</view>
							<view class="item_content">
								<view class="content_left">
									<text>{{item.createDate}}</text>
									<text v-if="item.storeName">{{item.storeName}}</text>
									<text v-if="item.oilName">{{item.oilName}}</text>
								</view>
								<text class="price">{{item.amount}}</text>
							</view>
						</view>
						<view v-if="skeleton" v-for="item in 10" :key="item" style="margin-top: 20rpx;">
							<i-skeleton :icon="false" :rowsW="['90%', '40%','60%','40%',]"
								:rowsH="['25rpx', '25rpx','25rpx','25rpx' ]" size="48rpx" height="220rpx" :rows="4">
							</i-skeleton>
						</view>
					</i-scrollList>
				</template>
				<template #yhmx>
					<i-scrollList @more="more" :height="height+ 'px'" :total="ListData.yhmx.total"
						:pageTotal="ListData.yhmx.list.length">
						<view class="income_item" v-for="(item,index) in ListData.yhmx.list" :key="index">
							<view class="item_title">
								<text class="title_name">{{item.title}}</text>
							</view>
							<view class="item_content">
								<view class="content_left">
									<text>{{item.createDate}}</text>
								</view>
								<text class="price">{{item.amount}}</text>
							</view>
						</view>
					</i-scrollList>
				</template>
				<template #txmx>
					<i-scrollList @more="more" :height="height+ 'px'" :total="ListData.txmx.total"
						:pageTotal="ListData.txmx.list.length">
						<view class="income_item" v-for="item in ListData.txmx.list" :key="item.orderId"
							@click="toDeatil(item.orderId)">
							<view class="item_title">
								<text class="title_name">{{item.title}}</text>
								<text class="title_status">{{approval_state_type[item.status]}}</text>
							</view>
							<view class="item_content">
								<view class="content_left">
									<text>{{item.createDate}}</text>
								</view>
								<text class="price">{{item.amount}}</text>
							</view>
							<view class="cause">
								{{item.remark}}
							</view>
						</view>
					</i-scrollList>
				</template>
			</i-moveSwiper>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		getWindowHeight,
		navTo
	} from '../../utils/common'
	import {
		approval_state_type
	} from '../../utils/enums'

	import {
		ref,
		computed,
		reactive
	} from 'vue'
	import {
		getAccountBrokerageAmount,
		getApiAccountWelfareList,
		getApiAccountCashList,
		getApiAccountDiscountList
	} from "../../api/user";
	import useStore from '../../stores/index'
	import {
		onShow
	} from '@dcloudio/uni-app'

	const windowHeight = getWindowHeight();
	const height = ref(400);
	const showWithdrawal = ref(false);
	const currentPage = ref(0);
	const skeleton = ref(true);

	// #ifdef  APP-PLUS
	height.value = windowHeight - 206 - 44
	// #endif
	// #ifdef  MP-WEIXIN
	height.value = windowHeight - 206 + 44
	// #endif


	const swiper_list = [{
		title: '收益明细',
		id: 'flmx'
	},
	{
		title: '优惠明细',
		id: 'yhmx'
	},
	{
		title: '提现明细',
		id: 'txmx'
	},
	]
	interface HeaderInfo {
		brokerageAmount : number,
		monthBrokerageAmount : number,
		todayBrokerageAmount : number,
	}
	const ListData = reactive({
		flmx: {
			list: [],
			tyjPageNum: 1,
			tyjPageSize: 15,
			total: 0
		},
		yhmx: {
			list: [],
			tyjPageNum: 1,
			tyjPageSize: 15,
			total: 0
		},
		txmx: {
			list: [],
			tyjPageNum: 1,
			tyjPageSize: 15,
			total: 0
		}
	})

	onShow(() => {
		getHeader()
		ListData.txmx.list = []
		ListData.txmx.tyjPageNum = 1
		ListData.txmx.total = 0
		getTxmx()

	})

	const headerInfo = reactive<HeaderInfo>({
		brokerageAmount: 0,
		monthBrokerageAmount: 0,
		todayBrokerageAmount: 0,
	})

	const store = useStore()
	const userInfo = computed(() => {
		return store.userInfo
	})

	const goWithdrawal = () => {
		if (userInfo.value.authStatus === '1') {
			showWithdrawal.value = true
			return
		}
		navTo('/pages/withdrawal/index?price=' + headerInfo.brokerageAmount, 'navigateTo')
	}

	const confirm = () => {
		showWithdrawal.value = false
		navTo('/pages/views/name_attestation', 'navigateTo')
	}
	const getHeader = async () => {
		const {
			data
		} = await getAccountBrokerageAmount()
		headerInfo.brokerageAmount = data.brokerageAmount || 0
		headerInfo.monthBrokerageAmount = data.monthBrokerageAmount || 0
		headerInfo.todayBrokerageAmount = data.todayBrokerageAmount || 0
	}

	const getFlmx = async () => {
		const data = await getApiAccountWelfareList({
			tyjPageNum: ListData.flmx.tyjPageNum,
			tyjPageSize: ListData.flmx.tyjPageSize
		})
		ListData.flmx.list = ListData.flmx.list.concat(data.rows)
		ListData.flmx.total = data.total
		skeleton.value = false
	}
	const getTxmx = async () => {
		const data = await getApiAccountCashList({
			tyjPageNum: ListData.txmx.tyjPageNum,
			tyjPageSize: ListData.txmx.tyjPageSize
		})
		ListData.txmx.list = ListData.txmx.list.concat(data.rows)
		ListData.txmx.total = data.total
	}
	const getYhmx = async () => {
		const data = await getApiAccountDiscountList({
			tyjPageNum: ListData.yhmx.tyjPageNum,
			tyjPageSize: ListData.yhmx.tyjPageSize
		})
		ListData.yhmx.list = ListData.yhmx.list.concat(data.rows)
		ListData.yhmx.total = data.total
	}

	const more = () => {
		switch (currentPage.value) {
			case 0:
				ListData.flmx.tyjPageNum++
				getFlmx()
				break;
			case 1:
				ListData.yhmx.tyjPageNum++
				getYhmx()
				break;
			case 2:
				ListData.txmx.tyjPageNum++
				getTxmx()
				break;
			default:
				break;
		}
	}
	const toDeatil = (orderId : string) => {
		navTo('/pages/withdrawal/detail?orderId=' + orderId, 'navigateTo')
	}

	const initData = () => {
		getYhmx()
		getFlmx()
	}
	initData()
</script>

<style lang="scss" scoped>
	.my_income {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.income_title {
			height: 156px;
			background-color: #EFD6BF;
			width: calc(100% - 48rpx);
			margin: 0 auto;
			border-radius: 16rpx;
			@include dfont(26rpx);

			.title_price {
				@include flexR;
				padding: 40rpx 0;
				width: calc(100% - 64rpx);
				margin: 0 auto;
				border-bottom: 2rpx solid #E8D0B9;

				.day_price {
					@include flexC;
				}

			}

			.title_bot {
				@include flexRS;
				padding: 0 32rpx;
				margin-top: 30rpx;

				.all_price {
					@include flexR;

					.price {
						margin-bottom: -3rpx;
						margin-left: 16rpx;
					}

				}
			}

			margin-bottom: 10px;
		}

		.price {
			@include dfont(36rpx);
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.income_list {
			.income_item {
				padding: 32rpx 32rpx 32rpx 0;
				margin-left: 32rpx;
				border-bottom: 1rpx solid $backColor;

				.item_title {
					width: 100%;
					@include flexRS;
					@include dfont;
					margin-bottom: 8rpx;

					.title_name {
						font-weight: bold;
					}

				}

				.cause {
					@include dfont(24rpx);
					color: #A0A0AD;
					white-space: normal;
					width: 70%;
				}
			}

			.item_content {
				@include flexRS;
				align-items: flex-end;

				.content_left {
					@include flexC;
					@include dfont(24rpx);
					color: #A0A0AD;

					text {
						margin-bottom: 8rpx;
					}
				}
			}
		}
	}

	.withdrawal_body {
		@include flexCC;
		@include dfont;
		padding: 48rpx 0;

		.text {
			@include titlefont(32rpx);
			margin-bottom: 32rpx;
		}
	}
</style>